<template>
  <div class="full-height bg-white pa-3">
    <a-row class="mb-2">
      <a-col :span="12">
        <a-typography-text class="mr-2">
          <IconFont :type="currentFile.icon" />
          {{ articleInfo.name }}
        </a-typography-text>
        <a-typography-text class="mr-2">
          创建日期：{{ articleInfo.create_itme }}
        </a-typography-text>
        <a-typography-text class="mr-2">
          修改日期：{{ articleInfo.update_time }}
        </a-typography-text>
        <!-- <a-typography-text class="mr-2">
          版本号：{{ articleInfo.version }}
        </a-typography-text> -->
      </a-col>
      <a-col :span="12" class="text-right">
        <a-alert
          message="离开页面前请保存"
          class="mr-2 pr-9"
          style="display: inline-flex"
          type="info"
          banner
        />
        <!-- <a-button @click="getMarkdown">输出</a-button>
        <a-button @click="getHtml" class="ml-2">输出HTML</a-button> -->
        <a-tooltip>
          <template #title>Ctrl + S</template>
          <a-button @click="saveArticle" class="ml-2">保存</a-button>
        </a-tooltip>
      </a-col>
    </a-row>
    <div class="mb-2"></div>
    <MarkdownEditor ref="editor" />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted
} from 'vue'
import { useStore } from 'vuex'
import { services, getArticle } from '@/services'
import { ArticleModel, FilesModel } from '@/services/service'
import { message } from 'ant-design-vue'
import { Pubsub } from '@/plugins/pubsub'
import { DOC_CTRL_S } from '@/types/constant'
import MarkdownEditor from '@/components/MarkdownEditor.vue'
import { useRouter } from 'vue-router'
import moment from 'moment'

export default defineComponent({
  name: 'edit',
  components: { MarkdownEditor },
  setup() {
    const router = useRouter()
    const editor = ref()
    const store = useStore()
    const currentFile = computed<FilesModel>(() => store.state.db.currentFile)
    const article = ref({} as ArticleModel)

    const articleInfo = computed(() => {
      return {
        name: currentFile.value.name,
        create_itme: moment(article.value.create_time).format('YYYY年MM月DD日'),
        update_time: moment(article.value.update_time).format('YYYY年MM月DD日'),
        version: currentFile.value.version
      }
    })

    async function getArticleInfo() {
      let id = currentFile.value.article_id
      if (!id) return

      let res = await getArticle(id as number)
      if (res.code) {
        article.value = res.data
        setMarkdown()
      }
    }

    function getMarkdown(): string {
      let con: string = editor.value.getMarkdown()
      // console.log(con)

      return con
    }
    function getHtml() {
      let con = editor.value.getHtml()
      console.log('getMrakdown', con)
    }
    function setMarkdown() {
      editor.value.setMarkdown(article.value.content)
    }
    async function saveArticle() {
      article.value.content = getMarkdown()

      let res = await services.updateArticle(article.value)

      if (res.code) {
        message.success('保存成功！')
      } else {
        message.error('保存失败！')
      }
    }

    function handleCtrls(event: string, data: any) {
      saveArticle()
    }

    onMounted(() => {
      Pubsub.on(DOC_CTRL_S, handleCtrls)

      if (!currentFile.value.name) {
        message.warn('先选择文件， 再编辑内容！')
        router.push('/')
        return
      }

      getArticleInfo()
    })
    onUnmounted(() => {
      Pubsub.unsubscribe(DOC_CTRL_S, handleCtrls)
    })
    return {
      editor,
      currentFile,
      articleInfo,
      getMarkdown,
      getHtml,
      saveArticle,
      setMarkdown,
      getArticleInfo
    }
  },
  activated() {
    this.getArticleInfo()
  }
})
</script>

<style lang="less" scoped></style>
